import { Graph, Node } from '@antv/x6'
import { ports } from './ports'

// 定义节点
class TreeNode extends Node {
  collapsed = false

  postprocess() {
    this.toggleCollapse(false)
  }

  isCollapsed() {
    return this.collapsed
  }

  toggleButtonVisibility(visible) {
    this.attr('buttonGroup', {
      display: visible ? 'block' : 'none',
    })
  }

  toggleCollapse(collapsed) {
    const target = collapsed == null ? !this.collapsed : collapsed
    if (!target) {
      this.attr('buttonSign', {
        d: 'M 1 5 9 5 M 5 1 5 9',
        strokeWidth: 1.6,
      })
    } else {
      this.attr('buttonSign', {
        d: 'M 2 5 8 5',
        strokeWidth: 1.8,
      })
    }
    this.collapsed = target
  }
}

class TreeRectNode extends TreeNode {

}

TreeRectNode.config({
  zIndex: 2,
  width: 60,
  height: 20,
  markup: [
    {
      tagName: 'g',
      selector: 'buttonGroup',
      children: [
        {
          tagName: 'circle',
          selector: 'button',
          attrs: {
            'pointer-events': 'visiblePainted',
          },
        },
        {
          tagName: 'path',
          selector: 'buttonSign',
          attrs: {
            fill: 'none',
            'pointer-events': 'none',
          },
        },
      ],
    },
    {
      tagName: 'rect',
      selector: 'body',
    },
    {
      tagName: 'text',
      selector: 'label',
    },
  ],
  attrs: {
    body: {
      refWidth: '100%',
      refHeight: '100%',
      strokeWidth: 1,
      fill: '#EFF4FF',
      stroke: '#5F95FF',
    },
    label: {
      textWrap: {
        ellipsis: true,
      },
      textAnchor: 'middle',
      textVerticalAnchor: 'middle',
      refX: '50%',
      refY: '50%',
      fontSize: 12
    },
    buttonGroup: {
      refX: '50%',
      refY: '100%',
      display: 'none',
      zIndex: 100,
    },
    button: {
      fill: '#5F95FF',
      stroke: 'none',
      refX: 20,
      refY: 8,
      r: 8,
      height: 16,
      width: 16,
      cursor: 'pointer',
      event: 'node:collapse',
    },
    buttonSign: {
      refX: 15,
      refY: 3,
      stroke: '#FFFFFF',
      strokeWidth: 1,
    },
  },
  ports,
})


class TreeImageRectNode extends TreeNode {

}

TreeImageRectNode.config({
  width: 60,
  height: 60,
  markup: [
    {
      tagName: 'g',
      selector: 'buttonGroup',
      children: [
        {
          tagName: 'circle',
          selector: 'button',
          attrs: {
            'pointer-events': 'visiblePainted',
          },
        },
        {
          tagName: 'path',
          selector: 'buttonSign',
          attrs: {
            fill: 'none',
            'pointer-events': 'none',
          },
        },
      ],
    },
    {
      tagName: 'rect',
      selector: 'body',
    },
    {
      tabName: 'image',
      selector: 'image',
    },
    {
      tagName: 'text',
      selector: 'label',
    },
  ],
  attrs: {
    body: {
      refWidth: '100%',
      refHeight: '100%',
      strokeWidth: 1,
      fill: '#EFF4FF',
      stroke: '#5F95FF',
    },
    image: {
      width: 40,
      height: 40,
      refX: '50%',
      refY: 20,
      src: 'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg'
    },
    label: {
      textWrap: {
        ellipsis: true,
      },
      textAnchor: 'middle',
      textVerticalAnchor: 'middle',
      height: 20,
      refX: '50%',
      refY: 50,
      fontSize: 12
    },
    buttonGroup: {
      refX: '50%',
      refY: '100%',
      display: 'none',
      zIndex: 100,
    },
    button: {
      fill: '#5F95FF',
      stroke: 'none',
      refX: 20,
      refY: 8,
      r: 8,
      height: 16,
      width: 16,
      cursor: 'pointer',
      event: 'node:collapse',
    },
    buttonSign: {
      refX: 15,
      refY: 3,
      stroke: '#FFFFFF',
      strokeWidth: 1,
    },
  },
  ports,
})

export {
  TreeNode,
  TreeRectNode,
  TreeImageRectNode
}

Node.registry.register('tree-rect-node', TreeRectNode, true)
Node.registry.register('tree-image-react-node', TreeImageRectNode, true)

export const treeNodeList = ['tree-rect-node', 'tree-image-react-node']